@gray: #aaa;

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

:global {
    .degradedOrgTree {
        .nodeWrapper {
            width: 300px;
            height: 72px;
        }
        .nodeCard {
            height: 72px;
            display: flex;
            align-items: center;

            &.rootNode {
                // margin-left: 29px;
                & > div > div > span {
                    text-align: center;
                    max-width: inherit;
                    margin-top: 26px;
                    font-size: 17px;
                }
            }

            .nodeContentBox {
                width: 243px;
                height: 72px;
                border-radius: 4px;
                border: 1px solid #aaa;
                transition: background 0.3s;
                background-color: #fdfdfd;
                padding: 10px;

                &.approveTip {
                    background: #fdfdfd url('../../../../../../assets/bg_processing_node.png') no-repeat bottom right;
                }

                &.deletedTip {
                    background: #f4f4f4 url('../../../../../../assets/bg_deleted_node.png') no-repeat bottom right;
                    border-color: #ccc !important;
                    > div:first-child::before {
                        background-color: #ccc !important;
                    }
                }

                &.appendTip {
                    background: #fdfdfd url('../../../../../../assets/bg_appended_node.png') no-repeat bottom right;
                }
            }

            //&.groupNode {
            //    .nodeContentBox {
            //        border-color: #ffa22d;
            //        > div:first-child::before {
            //            background-color: #ffa22d;
            //        }
            //    }
            //}
            //
            //&.companyNode {
            //    .nodeContentBox {
            //        border-color: #5590f6;
            //        > div:first-child::before {
            //            background-color: #5590f6;
            //        }
            //    }
            //}
            //
            //&.departmentNode {
            //    .nodeContentBox {
            //        border-color: #09ba6a;
            //        > div:first-child::before {
            //            background-color: #09ba6a;
            //        }
            //    }
            //}

            // 操作bar
            .operateBar {
                display: none;
                font-size: 18px;
                color: #000;
                height: 35px;
                line-height: 35px;
                border-radius: 0 0 4px 4px;
                background-color: rgba(255, 255, 255, 0.9);
                padding: 0;

                .iconfont {
                    color: #000;
                    cursor: pointer;
                    font-size: 22px;
                    display: block;
                    float: left;
                    width: 35px;
                    height: 35px;
                    margin-right: 4px;
                    line-height: 35px;
                    text-align: center;
                    overflow: hidden;

                    &:hover {
                        color: #ff9f00;
                    }

                    &.icon-delete:hover {
                        color: rgba(255, 0, 0, 0.85);
                    }

                    &:after {
                        content: '';
                        top: 11px;
                        right: -2px;
                        display: block;
                        width: 1px;
                        height: 14px;
                        background-color: #eaeaea;
                    }

                    &:last-child:after {
                        display: none;
                    }

                    &[disabled] {
                        pointer-events: none;
                        color: #9e9e9e;
                        cursor: not-allowed;
                    }
                }

                .ant-btn {
                    transition: none;
                }

                .ant-btn:hover {
                    transform: scale(1.25);
                }

                .anticon {
                    cursor: pointer;
                    margin: 0 6px;
                    font-size: 18px;
                }
            }

            // 鼠标经过出现操作bar
            &:hover {
                .employeesBox {
                    display: none;
                }
                .operateBar {
                    display: flex;
                }
            }

            &.highlight {
                background: #fff5ea;
            }
        }

        .agentBase {
            .nodeAgent {
                fill: none;
                stroke: rgb(215, 215, 215);
            }
        }

        .rootLine {
            fill: none;
            stroke: rgb(215, 215, 215);
        }

        .employeesLine {
            fill: none;
            stroke: rgb(215, 215, 215);
        }

        .employeesShape {
            width: 25px;
            height: 25px;
            display: flex;
            font-weight: 400;
            justify-content: center;
            align-items: center;
            color: rgba(0, 0, 0, 0.65);
            background-color: white;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 50%;
            cursor: pointer;

            .shape {
                font-size: 25px;
                margin-top: -5px;
                font-weight: 300;
                width: 25px;
                height: 25px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .employeeBox {
            .employeeItem {
                padding: 5px 0 5px 25px;
                border-bottom: 1px solid transparent;
                &.employeeBoxItem {
                    padding-left: 10px;
                    padding-right: 10px;
                }
            }
        }

        .employeeItemLine {
            fill: none;
            stroke: rgb(215, 215, 215);
        }

        .employeeItemBox,
        .employeeItemBoxLine {
            fill: none;
            stroke: rgb(215, 215, 215);
            stroke-dasharray: 5;
            stroke-width: 1;
        }

        .employeeItemInfo {
            .employeeItemInfoBox {
                display: flex;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                align-items: center;
                font-size: 12px;
                padding-top: 1px;
                i {
                    width: 20px;
                    height: 20px;
                    min-width: 20px;
                    display: block;
                    margin-right: 8px;
                    background-size: cover;
                    border-radius: 50%;
                    background-position: center;
                    background-repeat: no-repeat;
                }
                span {
                    flex: 1;
                    margin-left: 10px;
                    font-weight: 400;
                    color: #aaa;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .employeeItemName {
                    font-weight: initial;
                    font-size: 12px;
                }
                .auditStatus {
                    color: rgba(255, 0, 0, 0.85);
                }
            }
        }

        .employeePopover,
        .orgPopover {
            .ant-popover-inner-content {
                padding: 10px;
            }
        }

        .leftControl,
        .rightControl {
            display: flex;
            align-items: center;
            //margin-top: -5px;
            width: 30px;
            height: 30px;
            justify-content: center;
            i.controlLine {
                display: block;
                width: 8px;
                height: 1px;
                background-color: #aaa;
                &.controlLineMinus {
                    visibility: hidden;
                }
            }
            .placeholder {
                display: block;
                line-height: 30px;
            }
        }

        .leftCollapse,
        .rightCollapse {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1px solid rgba(0, 0, 0, 0.15);
            line-height: 20px;
            text-align: center;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.65);
            font-weight: normal;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

            &.minus {
                visibility: hidden;

                &:hover {
                    visibility: visible;
                }
            }
        }

        .nodeWrapper:hover .minus,
        .nodeWrapper:hover .controlLineMinus {
            visibility: visible !important;
        }
    }
}

// 组织名称和人员
.nodeOrgName {
    height: 22px;
    line-height: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .name:extend(.ellipsis) {
        font-size: 15px;
        height: 100%;
        flex: 1;
        text-align: left;
        font-weight: 600;
        max-width: 180px;
        display: inline-block;
        &:hover {
            color: #ff9f00;
        }
    }
    .nameDisabled {
        &:hover {
            color: inherit;
        }
    }

    .companySign {
        display: none;
        //margin-left: -10px;
        //display: inline-block;
        //vertical-align: 1px;
        //margin-right: 6px;
        //width: 4px;
        //height: 18px;
        //background-color: #aaa;
    }

    .number {
        color: @gray;
        min-width: 45px;
        margin-left: 5px;
        font-size: 14px;
        text-align: right;
    }

    .focus {
        color: @gray;
        font-size: 14px;
    }
    :global {
        .ant-divider-vertical {
            position: static;
        }
    }
}

// 负责人
.nodeOrgPrincipal {
    display: flex;
    flex: 1;
    align-items: center;
    font-size: 12px;
    margin-top: 5px;

    .name:extend(.ellipsis) {
        margin: 0 8px;
        min-width: 30px;
        // min-width: 40px;
        max-width: 48px;
    }

    .jobGrade {
        color: @gray;
        .dutyAlias,
        .rankValue {
            cursor: pointer;
            &:hover {
                color: #ff9f00;
            }
        }
        .dutyAlias:extend(.ellipsis) {
            float: left;
            max-width: 69px;
        }
        .rankValue {
            max-width: 25px;
        }
        :global {
            .disabled {
                cursor: default;
                &:hover {
                    color: #aaa;
                }
            }
        }
    }

    .jobStatus {
        color: @gray;
        margin: 0 0 0 5px;
    }

    .partTimeWork {
        display: inline-block;
        width: 40px;
        height: 20px;
        border-radius: 10px;
        line-height: 20px;
        text-align: center;
        background-color: #eef4fe;
        color: #5590f6;
        margin-left: 5px;
    }

    .avatar {
        width: 22px;
    }
}

.employeesWrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .noEmployeeLeader {
        flex: 1;
        margin-top: 5px;
        display: flex;
        align-items: center;
        .noEmployeeName {
            font-size: 12px;
            margin-left: 10px;
        }
    }

    .moreEmployee {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        margin-left: -10px;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e4e4e4;
        margin-top: 1px;

        &:hover,
        &:focus,
        &:active {
            border-color: #ffa22d;
            color: #ffa22d;
        }
    }

    :global {
        .ant-avatar {
            position: initial;
            display: flex;
            justify-content: center;
            align-items: center;

            .ant-avatar-string {
                position: initial;
                transform: initial !important;
                font-size: 14px;
            }
        }
    }
}

.employees {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

:global {
    .nodeWrapper {
        &.orgHorizontal {
            width: 254px;
            height: 132px;
            .nodeCard {
                flex-direction: column;
                height: auto;
                .leftControl,
                .rightControl {
                    margin-top: 0;
                    display: block;
                    height: 30px;
                    .leftCollapse,
                    .rightCollapse {
                        margin-left: 4px;
                    }
                    .controlLine {
                        width: 1px;
                        height: 8px;
                        margin-left: 15px;
                    }
                }
            }
            .static_nodeExtend {
                margin-right: 0;
            }
        }
    }
}

.clearFooterBorder {
    :global {
        .ant-modal-footer {
            border-top: none;
            padding: 0;
        }
    }
    .jobModalBody {
        max-height: 400px;
        overflow-y: auto;
        line-height: 20px;
        padding: 12px 12px 12px;
    }
}

.deleteInfo {
    p {
        margin-bottom: 5px;
    }
}
